/*jshint asi:true */

window.App = {}

App.PhotoModel = Backbone.Model.extend({})

App.PhotoCollection = Backbone.Paginator.requestPager.extend({
  model: App.PhotoModel,

  initialize: function(options) {
    this.tag = options.tag
  },

  paginator_core: {
    type: 'GET',
    dataType: 'json',
    url: 'http://tag.blackmilkclothing.com/tag/'
  },

  paginator_ui: {
    firstPage: 1,
    currentPage: 1,
    perPage: 20,
    totalPages: 1
  },

  server_api: {
    'tag': function() {
      return this.tag
    },
    'perPage': function() {
      return this.perPage
    },
    'page': function() {
      return this.currentPage
    },
    'cacheBuster': 90630102012
  },

  parse: function(response) {
    var photos = response.data
    this.totalPages = response.totalPages
    return photos
  },

  goToTag: function(tag) {
    this.tag = tag
    this.goTo(this.firstPage)
  }
})

App.PhotoView = Backbone.View.extend({
  tagName: 'li',

  template: JST.photo,

  initialize: function() {},

  render: function() {
    this.$el.html(this.template(this.model.toJSON()))
    var view = this
    this.$el.find('img').on('load', function() {
      view.showImage()
    });
    this.$el.find('img').on('error', function() {
      console.log("Removing post id:", view.model.get('id'));
      view.remove();
    });
    return this
  },

  showImage: function() {
    var img = this.$('img')
    if (img.width() > img.height()) {
      img.css({
        height: '100%'
      })
    } else {
      img.css({
        width: '100%'
      })
    }
    this.$el.css({
      opacity: 1
    })
  }
})

App.PhotosView = Backbone.View.extend({

  initialize: function(options) {
    this.collection.on('add', this.addOne, this)
    this.collection.on('reset', this.addAll, this)
    this.collection.fetch()
  },

  render: function() {},

  addAll: function() {
    this.$el.empty()
    this.collection.each(this.addOne, this)
    
    if (this.collection.length < 1 &&
        this.collection.currentPage == 1){
      $('.pagination_wrap', this.$el.parent()).remove()
    }
  },

  addOne: function(model) {
    var photoView = new App.PhotoView({
      model: model
    })
    this.$el.append(photoView.render().el)
  }
})

App.PaginationView = Backbone.View.extend({

  template: JST.pagination,

  events: {
    'click a.first': 'gotoFirst',
    'click a.prev': 'gotoPrev',
    'click a.next': 'gotoNext',
    'click a.last': 'gotoLast',
  },

  currentPage: 1,

  initialize: function() {
    this.collection.on('reset', this.render, this)
    this.collection.on('change', this.render, this)
  },

  render: function() {
    this.$('.pagination_wrap').html(this.template(this.collection.info()))
  },

  gotoFirst: function(e) {
    e.preventDefault()
    $('.loading').stop(true).fadeIn('fast')
    this.currentPage = 1
    this.collection.goTo(1, {
      success: function() {
        $('.loading').fadeOut('fast')
      }
    })
  },

  gotoPrev: function(e) {
    e.preventDefault()
    if (this.currentPage > 1) {
      $('.loading').stop(true).fadeIn('fast')
      this.collection.requestPreviousPage({
        success: function() {
          $('.loading').fadeOut('fast')
        }
      })
      this.currentPage -= 1
      return true
    }
    return false
  },

  gotoNext: function(e) {
    e.preventDefault()
    if (this.currentPage < this.collection.information.lastPage) {
      $('.loading').stop(true).fadeIn('fast')
      this.collection.requestNextPage({
        success: function() {
          $('.loading').fadeOut('fast')
        }
      })
      this.currentPage += 1
    }

  },

  gotoLast: function(e) {
    e.preventDefault()
    $('.loading').stop(true).fadeIn('fast')
    this.currentPage = this.collection.information.lastPage
    this.collection.goTo(this.collection.information.lastPage, {
      success: function() {
        $('.loading').fadeOut('fast')
      }
    })
  },

})

App.AppView = Backbone.View.extend({
  template: JST.main,

  initialize: function(options) {
    this.tag = 'purplegalaxies'

    if (typeof(options) != 'undefined') {
      this.tag = options.tag
      this.stickyPaging = true
      if(typeof(options.stickyPaging) != 'undefined'){
        this.stickyPaging = options.stickyPaging
      }
    }

    this.collection = new App.PhotoCollection({
      tag: this.tag
    })

    this.render()
  },

  render: function() {
    this.$el.html(this.template({
      tag: this.tag,
      currentPage: this.collection.currentPage,
      totalPages: this.collection.totalPages
    }))

    this.photosView = new App.PhotosView({
      collection: this.collection,
      el: this.$('.photos')
    })

    this.paginationView = new App.PaginationView({
      collection: this.collection,
      el: this.$('.pagination')
    })
    
    if (this.stickyPaging){
      this.paginationView.$el.pjScroll()
    }
  },

  viewTag: function(tag) {
    this.collection.goToTag(tag)
    this.paginationView.currentPage = 1
    this.$('.tag').html(tag)
  }
})
